<template>
  <div class="PayMod">
    <div class="title">选择支付方式</div>
    <div class="payList">
      <template v-for="(item,index) in payList">
        <div class="item" :key="index" @click="payChange(item,index)" :class="{active: payActiveIndex === index,'van-hairline-j--top':index===1}">
          <span class="radio"></span>
          <span class="icon" :class="{alipay: item.id===2,wechat: item.id===1}"></span>
          <span class="text">{{item.name}}</span>
          <span class="arrow-right"></span>
        </div>
      </template>
    </div>
    <div class="operate" @click="submitPay">
      <van-loading color="#fff " size="24" v-if="isLoading" />
      <span v-else>去支付</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PayMod',
  data () {
    return {
      payId: 1,
      payActiveIndex: 0,
      payList: [{
        id: 1,
        name: '微信转账付款'
      }, {
        id: 2,
        name: '支付宝转账付款'
      }]
    };
  },
  props: {
    value: {
      type: Boolean
    }
  },
  computed: {
    isLoading: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit('input', val);
      }
    }
  },
  mounted () {
  },
  methods: {
    payChange (data, index) {
      this.payActiveIndex = index;
      this.payId = data.id;
    },
    submitPay () {
      this.$emit('change', this.payId);
    }
  }
};
</script>
<style lang="less" scoped>
.PayMod {
  padding: 40px 40px 0;
  .title {
    color: #353535;
    font-size: 28px;
    font-weight: 600;
  }
  .payList {
    margin-top: 20px;
    .item {
      display: flex;
      align-items: center;
      padding: 45px 0;
      position: relative;
      .icon {
        width: 46px;
        height: 46px;
        margin: 0 20px 0 30px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
      }
      .alipay {
        background-image: url('/static/img/icon-alipay.png');
      }
      .wechat {
        background-image: url('/static/img/icon-wechat.png');
      }
      .text {
        flex: 1;
        font-size: 30px;
        color: #353535;
      }
      .radio {
        width: 32px;
        height: 32px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 50%;
        border: 1px solid #d2d2d2; /*no*/
        &::after {
          content: '';
          display: block;
          width: 21px;
          height: 21px;
          border-radius: 50%;
        }
      }
      .arrow-right {
        width: 20px;
        border-radius: 8px;
        height: 20px;
        border: 4px solid #353535;
        transform: rotate(45deg);
        border-top-right-radius: 0;
        border-left-color: #fff;
        border-bottom-color: #fff;
      }
    }
    .item.active {
      position: relative;
      .radio {
        border: 1px solid #ff0000; /*no*/
        &::after {
          background-color: #ff0000;
        }
      }
    }
  }
  .operate {
    background-color: #ff0034;
    font-size: 32px;
    font-family: PingFang SC;
    color: #fff;
    height: 88px;
    line-height: 86px;
    border-radius: 88px;
    text-align: center;
    margin: 0 0 40px;
  }
}
</style>
